<template>
    <div class="tab_bar">
        <div :class="`tab_bar_ul ${data.class.radius} ${data.class.shadow==1 ? 'shadow':''}`"
             :style="{'margin-bottom': data.style.margin_bottom+'px',
         'margin-left':data.style.margin_x+'px', 'margin-right': data.style.margin_x+'px', 'background-color': data.style.background}"
        >
            <div class="tab_bar_li" v-for="li in data.list">
                <div class="tab_bar_li_img ">
                    <img class="img" :src="li.image" />
                </div>
                <div  class="tab_bar_li_text">{{li.text}}</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {tabBar} from "@/views/site/diy/diy";

const props = withDefaults(defineProps<{
    data?: any,
}>(),{
    data: tabBar
})
</script>

<style scoped lang="scss">
@use "src/views/site/diy/style.css";
</style>
